<template>
	<div class="operationInfo">
		<div class="breadcrumb">
			<el-breadcrumb separator=">">
			  	<el-breadcrumb-item :to="{ path: '/kidney' }">肾源配型</el-breadcrumb-item>
		  	<el-breadcrumb-item>手术详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="operationInfo-wrap">
			<right-header :header-name="headerName" :show-border="true"></right-header>
			<div class="name-wrap">
				<span class="name">欧阳</span><!--
				--><span class="label">移植号</span><!--
				--><span class="number">13678098</span>
			</div>
			<div class="base-infor">
	    		<div class="title">手术详情</div>
	    		<div class="main">
			        <el-form :inline="true" label-position="right" label-width="105px" :model="operationForm" ref="newMatchForm">
			        	<div class="main-item">
			        		<el-form-item label="手术编码" prop="operNo">
						    	<el-input type="text" v-model="operationForm.operNo" auto-complete="off" class="input"></el-input>
						  	</el-form-item>
			        	</div>
					  	
					  	<div class="main-item">
					  		<el-form-item label="手术时间" prop="operTime">
						    	<el-date-picker
	      							v-model="operationForm.operTime"
			      					type="datetime"
			      					format="yyyy-MM-dd HH:mm"
			      					:picker-options="pickerOptions0"
			      					placeholder="请选择"  class="input">
								</el-date-picker>
						  	</el-form-item>
						  	<el-form-item label="手术名称" prop="operName" >
						 	   	<el-input type="text" v-model="operationForm.operName" auto-complete="off" class="input"></el-input>
						  	</el-form-item>
						  	<el-form-item label="手术来源" prop="origin">
						    	<el-select v-model="operationForm.origin" placeholder="请选择" class="input">
			      					<el-option label="本院手术" value="shanghai"></el-option>
			      					<el-option label="其他医院" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
					  	</div>
					  	<div class="main-item">
					  		<el-form-item label="主刀医生" prop="operator" >
						    	<el-select v-model="operationForm.operator" placeholder="请选择" class="input">
			      					<el-option label="张三" value="shanghai"></el-option>
			      					<el-option label="李四" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
						  	<el-form-item label="手术助手Ⅰ" prop="operTime">
						    	<el-select v-model="operationForm.operTime" placeholder="请选择" class="input">
			      					<el-option label="张三" value="shanghai"></el-option>
			      					<el-option label="李四" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
						  	<el-form-item label="手术助手Ⅱ" prop="operDuration">
						    	<el-select v-model="operationForm.operDuration" placeholder="请选择" class="input">
			      					<el-option label="张三" value="shanghai"></el-option>
			      					<el-option label="李四" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
					  	</div>
					  	<div class="main-item">
					  		<el-form-item label="手术部位" prop="operPart" >
						    	<el-select v-model="operationForm.operPart" placeholder="请选择" class="input">
			      					<el-option label="张三" value="shanghai"></el-option>
			      					<el-option label="李四" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
						  	<el-form-item label="第几次肾移植" prop="operTimes">
						  		<el-input type="text" v-model="operationForm.operTimes" auto-complete="off" class="input"></el-input>
						  	</el-form-item>
						  	<el-form-item label="联合移植" prop="combinedOper">
						    	<el-select v-model="operationForm.combinedOper" placeholder="请选择" class="small">
			      					<el-option label="是" value="shanghai"></el-option>
			      					<el-option label="否" value="beijing"></el-option>
			    				</el-select>
			    				<el-select v-model="operationForm.combinedOperPart" placeholder="请选择" class="small">
			      					<el-option label="心脏" value="shanghai"></el-option>
			      					<el-option label="肺" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
					  	</div>
					  	<div class="main-item">
			  				<el-form-item label="手术时长" prop="operDuration">
						    	<el-input type="text" v-model="operationForm.operDuration" auto-complete="off" class="input"></el-input><span class="unit">min</span>
						  	</el-form-item>
					  		<el-form-item label="麻醉方式" prop="narcoType" >
						    	<el-select v-model="operationForm.narcoType" placeholder="请选择" class="input">
			      					<el-option label="全身麻醉" value="shanghai"></el-option>
			      					<el-option label="局部麻醉" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
						  	
						  	<el-form-item label="切口愈合登记" prop="cutCheck">
						    	<el-select v-model="operationForm.cutCheck" placeholder="请选择" class="input">
			      					<el-option label="张三" value="shanghai"></el-option>
			      					<el-option label="李四" value="beijing"></el-option>
			    				</el-select>
						  	</el-form-item>
					  	</div>
					  	<div class="main-item">
					  		<el-form-item class="textarea-wrap" label="手术描述" prop="operDesc" >
					  			<el-input type="textarea" v-model="operationForm.operDesc" :rows="3" class="textarea"></el-input>
						  	</el-form-item>
					  	</div>
					</el-form>
	    		</div>

	    	</div>
	    	<div class="base-infor">
	    		<div class="title">配型信息</div>
	    		<div class="main">
					<div class="main-item">
						<div class="item-title clearfix">
					  		<div class="lable">人类白细胞抗原错配位点(HLAmm)</div>
					  		<div class="text">3</div>
					  	</div>
					</div>
					<div class="main-item">
						<div class="item ">
					  		<div class="lable">患者</div>
					  	</div>
					  	<div class="item">
					  		<div class="lable">HLA-A</div>
					  		<div class="text">12、24(9)</div>
					  	</div>
					  	<div class="item">
					  		<div class="lable">HLA-B</div>
					  		<div class="text">12(14)、24(9)</div>
					  	</div>
					  	<div class="item">
					  		<div class="lable">HLA-DR</div>
					  		<div class="text">12、24(9)</div>
					  	</div>
					</div>
					<div class="main-item">
						<div class="item-title clearfix">
					  		<div class="lable">群体反应抗体检测</div>
					  		<div class="text">无异常</div>
					  	</div>
					</div>
					<div class="main-item">
						<div class="item">
					  		<div class="lable">患者</div>
					  	</div>
					  	<div class="item big">
					  		<div class="lable">PRA(LabScreen-I-DX)</div>
					  		<div class="text">阴性</div>
					  	</div>
					  	<div class="item big">
					  		<div class="lable">PRA(LabScreen-II-DX)</div>
					  		<div class="text">阴性</div>
					  	</div>
					</div>
	    		</div>
	    	</div>
	    	<div class="newMatchBtn">
				<el-button type="primary" @click="submitForm('operationForm')">保存</el-button>
		    </div>
		</div>
		
	</div>
</template> 

<style lang='scss' rel='stylesheet/scss' scoped>
	.operationInfo{
		position: relative;
		.operationInfo-wrap{
			padding:0 20px;	
			.name-wrap{
				margin: 20px 0;
				.name{
					font-size: 16px;
				}
				.label{
					font-size: 12px;
					margin-left: 20px;
				}
				.number{
					font-size: 12px;
					margin-left: 10px;
				}
			}
			.base-infor{
				margin-bottom: 20px;
				.main{
					.main-item{
						.el-form-item{
							width: 295px;
						}
						.input{
							width: 160px;
						}
						.small{
							width: 90px;
						}
						.textarea-wrap{
							width: 100%;
							.textarea{
								width: 600px;
							}
						}
						.item{
							.lable{
								width: 110px;
								padding-right: 20px;
							}
							.text{
								width: 150px;
							}
						}
						.item-title{
							margin-bottom: 22px;
							.lable{
								text-align: left;
								float: left;
								margin-right: 20px;
								padding-left: 20px;
							}
							.text{
								width: 200px;
								float: left;
							}
						}
						.big{
							.lable{
								width: 180px;
							}
							.text{
								width: 150px;
							}
						}
					}
				}
			}
			.newMatchBtn{
				text-align: center;
				margin-bottom: 20px;
				margin-top: 20px;
			}
		}
	}
</style>

<script>
	import rightHeader from '@/components/rightHeader'
	export default {
		data() {
			return {
				headerName: '肾源配型',
				operationForm: {
                    operNo: '',//手术编码
                    operState: '',//状态
                    origin: '',//手术来源
                    chiefDoc:'',//主管医生
                    operName:'',//手术名称
                    operTime:'',//手术时间
                    operDuration:'',//手术时长
                    operator:'',//主刀医生
                    operPart:'',//手术部位
                    operTimes:'',//肾移植次数
                    combinedOper:'',//联合移植
                    combinedOperPart:'',//联合移植部位
                    narcoType:'',//麻醉方式
                    cutType:'',//切口类型
                    cutCheck:'',//切口愈合登记
                    operDesc:''//手术描述
                },
                pickerOptions0:{
                	//今天之后禁用
                	disabledDate(time){ 
                		return time.getTime()>Date.now()
                	}
                }
			}
		},
		components: {
			'right-header': rightHeader
		}
	}
</script>
